<template>
	<view class="user">
		<view class="personal">
			<view class="info-row">
				<view class="info-wrap border-radius-sm">
					<view class="avatar-col">
						<image class="avatar" :src="userInfo &&userInfo.avatarUrl || ''"></image>
					</view>
					<view class="info-col">
						<text class="info-item">昵称：{{userInfo && userInfo.nickName || ''}}</text>
						<!-- <text class="info-item">电话：{{phone}}</text> -->
					</view>
				</view>
			</view>
			<view class="radius-row"></view>
		</view>
		<view class="more">
			<view class="title">
				<text class="more-text">更多功能</text>
			</view>
			<view>
				<view class="grid-list">
					<view class="grid-item">
						<view style="text-align: center" @click="handleEnterAddress">
							<uni-icons color="#808080" style="display: block" type="paperplane-filled" size="30"></uni-icons>
							<text class="text grid-text">地址薄</text>
						</view>
					</view>
					<view class="grid-item">
						<view style="text-align: center" @click="handlePhoneCall">
							<uni-icons color="#808080" style="display: block" type="headphones" size="30"></uni-icons>
							<text class="text grid-text">联系客服</text>
						</view>
					</view>
					<view class="grid-item">
						<view style="text-align: center" @click="handleJoin">
							<uni-icons color="#808080" style="display: block" type="personadd-filled" size="30"></uni-icons>
							<text class="text grid-text">加入回收</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="logout-row">
			<button v-if="isLogin || sessionId" class="btn-primary" @click="handleLogout">退出登录</button>
			<button v-else class="btn-primary" open-type="getUserInfo" @getuserinfo="handleGetUserInfo">登录</button>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				nickname: '',
				phone: '',
				encryptedData: '',
				iv: '',
				userInfo: null
			}
		},
		computed: {
			...mapGetters(['role', 'sessionId']),
			isLogin() {
				const token = uni.getStorageSync('SESSION_ID')
				return token
			}
		},
		onShow() {
			const user = uni.getStorageSync('_U')
			this.userInfo = user
		},
		methods: {
			// 授权认证
			permissionLogin() {
				const self = this
				uni.login({
					success(res) {
						self.$request.login.userWeixinAuth({
							code: res.code
						}).then(res => {
							if (res.status === 200) {
								const isFirst = res.data.isFirst
								uni.setStorageSync('SESSION_ID', res.data.token)
								self.$store.commit('SET_TOKEN', res.data.token)
								if(isFirst) {
									self.getUser(res.data)
								}
							} else {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							}
						})
					}
				})
			},
			// 微信登录
			getUser(id) {
				const params = {
					encryptedData: this.encryptedData,
					iv: this.iv
				}
				this.$request.login.userLogin(params).then(res => {
					console.log(res)
					debugger
				})
			},
			// 授权用户信息
			handleGetUserInfo(e) {
				this.encryptedData = e.detail.encryptedData
				this.iv = e.detail.iv
				this.userInfo = e.detail.userInfo
				uni.setStorageSync('_U', e.detail.userInfo)
				this.permissionLogin()
			},
			// 跳转地址簿
			handleEnterAddress() {
				uni.navigateTo({
					url: '/pages/address/address'
				});
			},
			// 打电话
			handlePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: '17600123426',
				})
			},
			// 加入回收
			handleJoin() {
				if (this.role === 'USER') {
					uni.navigateTo({
						url: '/pages/join/join'
					})
				} else {
					uni.showToast({
						title: '您已经是回收员了',
						icon: 'none'
					})
				}
			},
			// 退出登录
			handleLogout() {
				uni.clearStorageSync()
				this.$store.commit('SET_TOKEN', '')
				if(this.role === 'STUFF') {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				} else {
						uni.reLaunch({
							url: '/pages/index/index'
						})						
				}
			}
		}
	}
</script>

<style lang="scss" scope>
	.user {
		.personal {
			padding-bottom: 40rpx;

			.info-row {
				height: 180rpx;
				background: $primary;
				padding: 20rpx 40rpx;
			}

			.info-wrap {
				height: 160rpx;
				padding: 20rpx;
				display: flex;
				align-items: center;
				background: $white;

			}

			.radius-row {
				height: 40rpx;
				background: $primary;
				border-radius: 0 0 80% 80%;
			}

			.avatar-col {
				width: 120rpx;
				height: 120rpx;
				border-radius: $uni-border-radius-circle;
				overflow: hidden;
				background: $white;
				border: 1rpx solid $uni-border-color;

				.avatar {
					width: 100%;
					height: 100%;
				}
			}

			.info-col {
				flex: 1;
				min-width: 0;
				padding-left: 30rpx;
				width: 33.33%;

				.info-item {
					display: block;
					color: $uni-text-color-grey;

					&:first-child {
						padding-bottom: 10rpx;
					}

					&:last-child {
						padding-bottom: 10rpx;
					}
				}
			}
		}

		.more {
			padding: 20rpx;

			.title {
				padding: 16rpx 16rpx 30rpx 30rpx;
				position: relative;

				&:before {
					content: "";
					position: absolute;
					left: 0;
					top: 16rpx;
					width: 12rpx;
					height: 40rpx;
					border-radius: 8rpx;
					background: $primary;
				}
			}

			.more-text {
				font-weight: 700;
				font-size: 26rpx;
				color: $uni-text-color;
			}

			.grid-list {
				display: flex;
				align-items: center;
				justify-content: center;

				.grid-item {
					height: 140rpx;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.grid-text {
				color: $uni-text-color-placeholder;
				display: block;
			}
		}

		.logout-row {
			width: 100%;
			padding: 0 20rpx;
			position: fixed;
			left: 0;
			bottom: 20rpx;
			box-sizing: border-box;

			.logout-btn {}
		}
	}
</style>
